import React, { FC, useState } from 'react'
import styles from '../common.module.scss'
import QuestionCard from '../../../components/QuestionCard'
import { Typography, Empty, Spin } from 'antd'
import useLoadQuestionListData from '../../../hooks/useLoadQuestionListData'
import ListSearch from '../../../components/ListSearch'
import ListPage from '../../../components/ListPage'
const Star: FC = () => {
    const { Title } = Typography
    const { data = {}, loading } = useLoadQuestionListData({ isStar: true })
    const { list = [], total = 0 } = data
    return (
        <>
            {/* header部分 */}
            <div className={styles.header}>
                <div className={styles.left}>
                    <Title level={3}>星标问卷</Title>
                </div>
                <div className={styles.right}>
                    <ListSearch />
                </div>
            </div>
            {/* 列表部分 */}
            <div className={styles.container}>
                {loading && <div style={{ textAlign: 'center' }}>
                    <Spin />
                </div>}
                {(!loading && list.length === 0) && <Empty description='暂无数据' />}
                {(!loading && list.length > 0) && list.map((item: any) => {
                    const { _id } = item
                    return <QuestionCard key={_id} {...item} />
                })}
            </div>
            {/* 尾部 */}
            <div className={styles.footer}>
                {/* 分页组件 */}
                <ListPage total={total} />
            </div>
        </>
    )
}

export default Star